export function vueTemplate(str, config) {
    console.log('config',config);

    let classArr = []
    if(config.config.pagesRelative != false) {
        classArr.push('relative')
    } 
    if (config.config.widthFlex != false) {
        classArr.push('w-full flex')
    }
    if (config.config.heightFlex != false) {
        classArr.push('h-full flex flex-col overscroll-y-auto')
    }

    return `<template>
        <div${classArr.length > 0 ? `\0class="${classArr.join('\0')}"`:''}>
            ${str}
        </div>
    </template>`
}

export function vueScript(str) {
    return `<script>
        ${str}
    </script>`
}

const layouts = {
    flex(scheme) {
        let classArr = []
        for(let i in scheme.className) {
            if(scheme.className[i] != '') {
                classArr.push(scheme.className[i])
            }
        }

        const children = scheme.columns.map(el => {
            let childClassArr = []
            console.log('children',el);
            for(let i in el) {
                if(el[i] != '' && typeof el[i] == 'string') {
                    childClassArr.push(el[i])
                }
            }

            console.log('el.list',el.list);
            const tagDom = el.list.map(child => {
                return tags[child.type](child)
            })

            console.log('tagDom',tagDom);

            return `<div${childClassArr.length > 0 ? `\0class="${childClassArr.join('\0')}"`:''}>
                ${tagDom.join('\n')}
            </div>`
        })

        return `<div${classArr.length > 0 ? `\0class="${classArr.join('\0')}"`:''}>
                ${children.join('\n')}
            </div>
        `
    }
}

const tags = {
    button(el) {
        console.log('button',el);
        const type = el.options.type ? `\0type="${el.options.type}"` : ''
        const disabled = el.options.disabled ? '\0:disabled=\'true\'' : ''
        const icon = el.className.icon ? `\0icon="${el.className.icon}"` : ''
        const dynamicFun = el.options.dynamicFun ? `\0@click="${el.options.dynamicFun}"` : ''

        return `<a-button${type}${disabled}${icon}${dynamicFun}>${el.label}</a-button>`
    },
    RxButton(el) {
        console.log('RxButton',el);
        const type = el.options.type ? `\0:butnType="${el.options.type}"` : ''
        const icon = el.className.icon ? `\0:butnIcon="${el.className.icon}"` : ''
        const dynamicFun = el.options.dynamicFun ? `\0@click="${el.options.dynamicFun}"` : ''
        const width = el.className.width

        return `<rx-button${type}${icon}${dynamicFun}${width != '' ? `\0class="${width}"`:''}>${el.className.text}</rx-button>`
    }
}

export function makeUpHtml(config) {
    const htmlList = []
    console.log('formConfig',config);
    // 遍历渲染每个组件成html
    config.list.forEach(el => {
        console.log('el',el);
        if(el.type !== 'flex') {
            htmlList.push(tags[el.type](el))
        } else {
            htmlList.push(layouts[el.type](el))
        }
        
    })
    const htmlStr = htmlList.join('\n')
    return htmlStr
}